<template>
  <div class="content">
    <el-row>
      <el-col>
        <!-- 工具栏 -->
        <div class="toolbar" style="float:left;padding-top:10px;padding-left:5px;">
          <el-form :inline="true" :model="filters" :size="size">
            <!-- <el-form-item>
              <el-input v-model="filters.name" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item>
              <kt-button icon="fa fa-search" :label="$t('action.search')" perms="sys:dept:view" type="primary"/>
            </el-form-item> -->
            <el-form-item>
              <kt-button
                icon="fa fa-plus"
                :label="$t('action.add')"
                perms="sys:dept:save"
                type="primary"
                @click="addorupdate('')"/>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table
          :data="tableData"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
          :size="size"
          default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column
            prop="fullName"
            label="单位全称"
            min-width="30%">
          </el-table-column>
          <el-table-column
            prop="simpleName"
            label="简称"
            align="center"
            min-width="20%">
          </el-table-column>
          <el-table-column
            prop="type"
            label="类型"
            align="center"
            min-width="10%">
            <template slot-scope="scope">
              <el-tag size="mini"
                type="success"
                v-if="scope.row.type === 2">公司</el-tag>
              <el-tag
                size="mini"
                v-else>部门</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="description"
            label="描述"
            :show-overflow-tooltip="true"
            min-width="30%"
            align="center">
          </el-table-column>
          <el-table-column
            label="操作"
            min-width="20%"
            align="center">
            <template slot-scope="scope">
              <!-- <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="addorupdate(scope.row.id)">修改</el-button> -->
              <kt-button
                icon="fa fa-edit"
                :label="$t('action.edit')"
                perms="sys:dept:update"
                @click="addorupdate(scope.row.id)"/>
              <!-- <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="deleteDate(scope.row.id)">删除</el-button> -->
              <kt-button
                icon="fa fa-trash"
                :label="$t('action.delete')"
                perms="sys:dept:delete"
                type="danger"
                @click.native="deleteDate(scope.row.id)"/>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <add-or-update ref="addorupdateRef" @handleList="getList"></add-or-update>
  </div>
</template>

<script>
import {
  getDataList,
  deleteList
} from '@/api/auth/dept.js'
import addOrUpdate from './components/addorupdate.vue'
import KtButton from "@/views/Core/KtButton"
export default {
  data() {
    return {
      size: window.SITE_CONFIG.tableSize,
      filters: {
        name: ''
      },
      tableData: []
    }
  },
  components: {
    addOrUpdate,
    KtButton
  },
  created() {
    this.getList()
  },
  methods: {
    addorupdate(id) {
      this.$refs.addorupdateRef.init(true, id)
    },
    getList() {
      getDataList().then((res) => {
        this.tableData = res.data
      })
    },
    deleteDate(id) {
      this.$confirm('确定要执行该操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        deleteList(id).then((res) => {
          this.getList()
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped>
  .input-with-select {
    width: 350px;
    margin-right: 20px;
  }
</style>
